<template>
	<view class="myFarm">
		<view class="top">
			<view class="title df">
				<view class="text">
					{{topAreaData.landName}}
				</view>
				<view class="icons df">
					<view class="icon" :class="type == 'photo' ? 'bacf' : ''" @click="type = 'photo'">
						<u-icon name="photo" color="#17CC77" size="26" class="uIcon"></u-icon>
					</view>
					<view class="icon" :class="type == 'camera' ? 'bacf' : ''" @click="type = 'camera'">
						<u-icon name="play-right" color="#17CC77" size="26"></u-icon>
					</view>
				</view>
			</view>
			<view class="image">
				<image v-if="type == 'photo'" class="com" :src="topAreaData.picUrl" mode=""></image>
				<video v-if="type == 'camera'" class="com"src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" controls autoplay></video>
			</view>
			<view class="detail">
				<view class="com df">
					<view class="tt">果树编号</view>
					<view class="num" style="font-size: 28rpx;">：{{topAreaData.landId}}</view>
				</view>
				<view class="com df">
					<view class="tt">认养时间</view>
					<view class="num">：{{topAreaData.fosterTime}}</view>
				</view>
				<view class="com df">
					<view class="tt">状态</view>
					<view class="num">：{{topAreaData.state == 0 ? "待种植":topAreaData.state == 1? "待采收":"已采收"}}</view>
				</view>
				<view class="com df">
					<view class="tt">租金</view>
					<view class="num">：{{topAreaData.rent}}.00/年</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="statistics">
				<view class="area df">
					<view class="com">
						<view class="tt">总面积</view>
						<view class="num">{{topAreaData.totalArea}}平方</view>
					</view>
					<view class="line"></view>
					<view class="com">
						<view class="tt">已种植</view>
						<view class="num">{{topAreaData.alreadyPlant}}平方</view>
					</view>
					<view class="line"></view>
					<view class="com">
						<view class="tt">未种植</view>
						<view class="num">{{topAreaData.notPlantArea}}平方</view>
					</view>
				</view>
				<view class="check">
					<view class="tt">选择种植</view>
					<view class="typeT">种植品种</view>
					<view class="type df">
						<view class="vfor" v-for="(v,i) in typeList" :key="i" :class="plantType == i ? 'active' : ''"
							@click="selectCategory(v,i)">
							{{v}}
						</view>
					</view>
					<view class="typeT">种植面积</view>
					<view class="type df">
						<u-input type="number" placeholder="请输入种植面积" v-model="formData.growArea"></u-input>
						<!-- view class="vfor" v-for="(v,i) in areaList" :key="i" :class="areaType == i ? 'active' : ''"
							@click="areaType = i">
							{{v.name}}
						</view> -->
					</view>
				</view>
				<view class="btn" @click="confirm">确认</view>
			</view>
			<view class="tab df">
				<view class="com df" @click="jumpWeather">
					<view class="yuan"></view>
					<view class="image">
						<image src="../../static/qx.png" mode="" class="image"></image>
					</view>
					<view class="text">实时气象</view>
				</view>
				<view class="com df" @click="jumpCamera">
					<view class="yuan"></view>
					<view class="image">
						<image src="../../static/sxt.png" mode="" class="image"></image>
					</view>
					<view class="text">监控实况</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {findLandMsgByLandMsgId,findLandGrowVariety,landGrow} from "@/api/api.js"
	export default {
		data() {
			return {
				type: 'photo',
				plantType: '0',
				topAreaData:{
					code:'42342355555',
					time:'2022-09-09 13:33:22',
					category:"苹果",
					status:'待种植',
					borrowPrice:'400'
				},
				landId:'',
				formData:{
					variety:'',
					growArea:0,
				},
				typeList: [],
				areaType: '0',
			}
		},
		onLoad(option) {
			console.log(option);
			this.landId = option.landId
			let query = `landId=${option.landId}`
			this.getLandInfo(query)
			this.getCategoryByLandId(this.landId)
		},
		methods:{
			jumpWeather(){
				uni.navigateTo({
					url:'/pages/user/weather?landId='+this.landId
				})
			},
			jumpCamera(){
				uni.navigateTo({
					url:"/pages/user/camera?landId="+this.landId
				})
			},
			selectCategory(v,i){
				this.plantType = i
				this.formData.variety = v
				console.log(this.formData);
			},
			async confirm(){
				if(!this.formData.growArea){
					uni.$u.toast("请输入种植面积")
					return
				}
				console.log(this.formData);
				const res = await landGrow(this.formData)
				console.log('种植请求',res);
				if(res?.data.code == 200){
					uni.showToast({
						title:res.data.msg,
						icon:'success',
						success: () => {
							setTimeout(()=>{
								uni.navigateTo({
									url:"/pages/user/farm?landId="+this.landId+"&status=0"
								})
							},1000)
						}
					})
				}else{
					uni.showToast({
						title:res.data.msg,
						icon:"none"
					})
				}
			},
			async getLandInfo(query){
				const res = await findLandMsgByLandMsgId(query)
				console.log('res:',res);
				this.topAreaData = res.data.data
				
			},
			async getCategoryByLandId(landId){
				let query = "landId="+landId
				const res = await findLandGrowVariety(query)
				console.log('品种;',res);
				this.typeList = res.data.data
				this.formData.variety = this.typeList[0]
				this.formData.landId = landId
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myFarm {
		.df {
			display: flex;
		}

		.top {
			width: 690rpx;
			// height: 108rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			padding: 20rpx 30rpx 30rpx;
			border-top: 1px solid rgba(0, 0, 0, 0.12);

			.title {
				font-size: 30rpx;
				color: #1d1d1d;
				font-weight: bold;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.text {
					height: 68rpx;
					line-height: 68rpx;
				}

				.icons {
					// width: 212rpx;
					// height: 56rpx;
					background: #EFEFEF;
					border-radius: 11rpx;
					padding: 4rpx;

					.icon {
						// width: 102rpx;
						// height: 56rpx;
						border-radius: 11rpx;
						padding: 5rpx 28rpx;
					}

					.bacf {
						background: #FFFFFF;
					}
				}
			}

			.image {
				width: 690rpx;
				height: 374rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.com {
					width: 690rpx;
					height: 374rpx;
				}
			}

			.detail {
				margin-top: 30rpx;

				.com {
					font-size: 26rpx;
					margin-top: 25rpx;

					.tt {
						width: 130rpx;
						text-align: justify;
						text-align-last: justify;
						color: rgba(68, 78, 104, 0.7);
					}

					.num {
						color: #1d1d1d;
					}
				}
			}
		}

		.bottom {
			padding: 20rpx 30rpx 40rpx;

			.statistics {
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
				padding-bottom: 46rpx;
				margin-bottom: 20rpx;

				.area {
					padding: 30rpx 0;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);

					.com {
						width: 229rpx;
						color: #1D1D1D;

						.tt {
							text-align: center;
							font-size: 26rpx;
							margin-bottom: 32rpx;
						}

						.num {
							font-size: 30rpx;
							font-weight: bold;
							text-align: center;
						}
					}

					.line {
						margin-top: 10rpx;
						height: 88rpx;
						width: 1rpx;
						background: rgba(0, 0, 0, 0.12);
					}
				}

				.check {
					padding: 30rpx 20rpx;

					.tt {
						font-size: 30rpx;
						font-weight: bold;
						color: #17cc77;
						margin-bottom: 46rpx;
						text-align: center;
					}

					.typeT {
						font-size: 28rpx;
						font-weight: bold;
						color: #1D1D1D;
						margin-bottom: 34rpx;
					}

					.type {
						justify-content: space-between;
						flex-wrap: wrap;
						margin-bottom: 44rpx;

						.vfor {
							width: 188rpx;
							height: 66rpx;
							background: #F3F5F4;
							border-radius: 8rpx;
							line-height: 66rpx;
							text-align: center;
							font-size: 28rpx;
						}

						.active {
							background: #17CC77;
							color: #FFFFFF;
						}
					}
				}

				.btn {
					width: 280rpx;
					height: 84rpx;
					background: #1BC46D;
					box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(27, 196, 109, 0.4);
					border-radius: 12rpx;
					line-height: 84rpx;
					text-align: center;
					color: #FFFFFF;
					font-size: 32rpx;
					margin: auto;
				}
			}

			.tab {
				justify-content: space-between;

				.com {
					width: 295rpx;
					height: 108rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.04);
					padding: 20rpx;
					position: relative;
					overflow: hidden;

					.yuan {
						width: 116rpx;
						height: 120rpx;
						background: #17CC77;
						opacity: 0.1;
						border-radius: 50%;
						position: absolute;
						top: 48rpx;
						left: -20rpx;
					}

					.image {
						width: 108rpx;
						height: 108rpx;
						margin-right: 22rpx;
					}

					.text {
						font-size: 30rpx;
						font-weight: bold;
						color: #1d1d1d;
						line-height: 108rpx;
					}
				}
			}
		}
	}
</style>